<template>
  <div>
    <div id="cornerComment" v-if="dialogVisible">
      <div class="cornerComment-in">
        <div class="cornerComment-in-title">
          <span>编辑会议</span>
          <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
        </div>
        <div class="commentBody">
          <el-row class="warp">
            <el-col :span="24" class="warp-main">
              <el-form ref="infoForm" :model="infoForm" label-width="120px">
                <el-form-item label="会议主题:" prop="name">
                  <el-input v-model="infoForm.title" placeholder="会议主题"></el-input>
                </el-form-item>
                <el-form-item label="会议时间:" prop="time">
                  <el-date-picker type="date"
                                  placeholder="选择会议时间"
                                  v-model="infoForm.time"
                                  :picker-options="pickerOptions1"
                                  value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
<!--                <el-form-item label="会议时间段:">-->
<!--                  <el-select v-model="timeListValue" placeholder="会议时间段" multiple style="width: 100%">-->
<!--                    <el-option :label="item.stringOption" :value="item.id" v-for="(item, index) in timeList"-->
<!--                               :key="index"></el-option>-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
                <el-form-item label="主持人:">
                  <span v-if="applyUserBox" class="mr-10">{{ applyUserBox ? applyUserBox.realname : '' }}</span>
                  <el-button size="small" @click="cornerUserFn">选择会议主持人</el-button>
                </el-form-item>
                <el-form-item label="参与人员:">
                  <el-button type="primary" @click="chooseStudent" class="mb-10" size="small">选择参与人员</el-button>
                  <div>
                    <el-tag
                      :key="tag.id"
                      v-for="(tag,index) in dynamicTags"
                      closable
                      :disable-transitions="false"
                      @close="handleClose(index)"
                      class="mr-10"
                    >{{ tag.realname }}
                    </el-tag>
                  </div>
                </el-form-item>
                <el-form-item label="会议简介:" prop="description">
                  <el-input v-model="infoForm.description" placeholder="会议简介" type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="会议视频:" prop="description" v-if="meetId">
                  <div v-if="videoList.length">
                    <p v-for="(item,index) in videoList" @click="showVideoMeetFn(item.video)" class="video-list">
                      视频{{ index + 1 }}</p>
                  </div>
                  <div v-else>暂无</div>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
        <div class="cornerComment-in-footer">
          <el-button @click.native="closePOpup" size="small">取消</el-button>
          <el-button size="small" type="primary" @click="onSubmit">确认并提交</el-button>
        </div>
      </div>
    </div>
    <!--    <activeVideoDialog :videosrcCheck="videosrcCheck" :visible.sync="dialogvideoVisible"></activeVideoDialog>-->
    <singleTeacherModle :visible.sync="cornerUserVisible" @studentFn="cornerUserFile"
                        :dynamicTagsArray="dynamicTagsArray"></singleTeacherModle>
    <MultipleTeacherModle :visible.sync="studentVisible" @studentFn="studentFn" :userclassId="infoForm.class_id"
                          :usersectionId="infoForm.section_id"
                          :dynamicTagsArray="dynamicTagsArray"></MultipleTeacherModle>
  </div>
</template>

<script>
// import activeVideoDialog from '@/components/dialog/activeVideoDialog.vue'

export default {
  props: ['visible', 'meetId'], // noteId 任务人员id
  components: {
    // activeVideoDialog
  },
  data() {
    return {
      dialogVisible: false,
      cornerUserVisible: false,
      studentVisible: false,
      dialogvideoVisible: false,
      videosrcCheck: '',
      infoForm: {
        title: '', // 	字符串 	必填 	1 	- 	标题
        description: '', // 	字符串 	必填 	1 	- 	简介
        user_id: '', // 	字符串 	必填 	1 	- 	负责人
        join_user: '', // 	字符串 	必填 	1 	- 	参与人
        time: '', // 	字符串 	必填 	1 	- 	会议时间
        word: '',
        pic: ''
      },
      // 限制时间选择
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      dynamicTags: [],
      dynamicTagsArray: {},
      videoList: [],
      timeListValue: [],
      timeList: [],
      applyUserBox: null,
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        // this.getTimeList()
        if (this.meetId) {
          this.getEdit()
        }
      } else {
        this.applyUserBox = null
        this.dynamicTags = []
        this.infoForm = {
          title: '', // 	字符串 	必填 	1 	- 	标题
          description: '', // 	字符串 	必填 	1 	- 	简介
          user_id: '', // 	字符串 	必填 	1 	- 	负责人
          join_user: '', // 	字符串 	必填 	1 	- 	参与人
          time: '', // 	字符串 	必填 	1 	- 	会议时间
          word: '',
          pic: ''
        }
      }
    }
  },
  created() {

  },
  methods: {
    async getEdit() {
      let data = await this.$fetch(this.api.videoMeet.edit, {id: this.meetId})
      this.dynamicTags = data.vo.join_user
      this.infoForm.title = data.vo.title
      this.infoForm.description = data.vo.description
      this.infoForm.time = data.vo.time
      this.applyUserBox = this.tranfromJson(data.vo.user)
      this.videoList = data.video
    },
    onSubmit() {
      if (!this.infoForm.title) {
        this.$message.error('填写会议主题')
        return false
      }
      if (!this.infoForm.time) {
        this.$message.error('选择会议时间')
        return false
      }
      // if (!this.timeListValue.length) {
      //   this.$message.error('选择会议时间段')
      //   return false
      // }
      if (!this.applyUserBox) {
        this.$message.error('选择会议主持人')
        return false
      }
      if (!this.dynamicTags.length) {
        this.$message.error('选择会议参与人员')
        return false
      }
      this.materielImport()
    },
    tranfromJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    // 添加会议
    async materielImport(path) {
      let data_ = JSON.parse(JSON.stringify(this.infoForm))
      let dynamicTagsId = []
      for(let item of this.dynamicTags){
        dynamicTagsId.push(item.id)
      }
      data_.timeLine = this.timeListValue.join(',')
      data_.join_user = dynamicTagsId.join(',')
      data_.user_id = this.applyUserBox.id
      if(this.meetId){
        data_.id = this.meetId
        let data = await this.$post(this.api.videoMeet.edit, data_)
        if (data.code === 0) {
          this.$message.success(data.msg)
          this.$emit('InitFn')
          this.closePOpup()
        }
      }else{
        let data = await this.$post(this.api.videoMeet.add, data_)
        if (data.code === 0) {
          this.$message.success(data.msg)
          this.$emit('InitFn')
          this.closePOpup()
        }
      }
    },
    // 会议时间段
    getTimeList() {
      // 日期
      // 时间段
      this.$fetch(this.api.schedule.scheduleHour, {status: 1}).then((response) => {
        if (response.code === 0) {
          for (let i in response.list) {
            response.list[i].stringOption = response.list[i].start_time + '-' + response.list[i].end_time
          }
          this.timeList = response.list
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    httpSubmit() {
    },
    getResponse(response) {
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    chooseStudent() {
      let a_ =  this.tranfromJson(this.dynamicTags)
      let list_ = {}
      for(let item of a_){
        list_[item.id] = item
      }
      this.dynamicTagsArray = list_
      this.studentVisible = true
    },
    cornerUserFn() {
      this.cornerUserVisible = true
    },
    handleClose(index) {
      this.dynamicTags.splice(index, 1)
    },
    studentFn(option) {
      let dynamicTags = []
      for (let i in option) {
        dynamicTags.push(option[i])
      }
      this.dynamicTags = dynamicTags
      // this.infoForm.join_user = this.dynamicTagsId.join(',')
    },
    cornerUserFile(option) {
      console.log('选中的负责人：', option)
      this.applyUserBox = option
      this.infoForm.user_id = option.id
    },
    showVideoMeetFn(option) {
      this.videosrcCheck = option
      this.dialogvideoVisible = true
    },
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 55%;
  height: 65%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.resruitment-title {
  padding: 5px 0;
  border-bottom: 2px solid #abd3f3;
  margin-bottom: 20px;
}

.el-radio {
  margin-right: 20px;
}

.jobTime {
  display: flex;
  align-items: center;
}

.jobTime span {
  padding: 0 10px;
}
</style>


